<template>
  <vue-particles
      color="#000"
      :particleOpacity="0.7"
      :particlesNumber="60"
      shapeType="circle"
      :particleSize="2"
      linesColor="#000"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="2"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      class="lizi"
  >
  </vue-particles>
  <div   class="login" style="overflow: hidden">
      <div  style="width: 100%;">
        <div style="color: #000000;font-size: 2.5vw;text-align: center; margin-bottom: 2vw">欢迎登陆</div>
        <el-form ref="form" :model="form" size="large" :rules="rules" >
          <el-form-item prop="username">
            <el-input :prefix-icon="User" v-model="form.username" style="font-size: 1.5vw; border: 0.1vw solid ; border-radius: 0.6vw" placeholder="请输入用户名">
            </el-input>
          </el-form-item>
          <el-form-item prop="nickName">
            <el-input :prefix-icon="User" v-model="form.nickName" style="font-size: 1.5vw; border: 0.1vw solid ; border-radius: 0.6vw" placeholder="请输入姓名">
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input :prefix-icon="Lock" v-model="form.password" type="password" style="font-size: 1.5vw; border: 0.1vw solid ; border-radius: 0.6vw" placeholder="请输入密码" show-password></el-input>
          </el-form-item>
          <el-form-item prop="confirm">
            <el-input :prefix-icon="Lock" v-model="form.confirm" type="password" style="font-size: 1.5vw; border: 0.1vw solid ; border-radius: 0.6vw" placeholder="再次确认" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button style="width: 100%;font-size: 1.5vw;background: #000000;color: #FFFFFF" type="primary" @click="register">注册</el-button>
          </el-form-item>
        </el-form>
        <div>
          <span style="color: #000000;font-size: 1.2vw;cursor: pointer;text-decoration: underline;" @click="this.$router.push('/Login')">返回登陆</span>
        </div>
      </div>
  </div>

</template>

<script>
import request from "@/utils/request";

export default {
  name: "Login",
  data(){
    return{
      form:{},
      rules:{
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        nickName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
        confirm: [
          { required: true, message: '请确认密码', trigger: 'blur' },
        ],
      }
    }
  },
  methods:{
    register(){
      this.$refs['form'].validate((valid)=>{
        if(valid) {
          if (this.form.password != this.form.confirm && this.form.password != null && this.form.confirm != null) {
            this.$message({
              type: "error",
              message: "两次密码输入不一致"
            })
            this.form.confirm = "";
            this.form.password = "";
            return
          }
          request.post("/user/register", this.form).then(res => {
            if (res.code == '0') {
              this.$message({
                type: "success",
                message: "注册成功"
              })
              this.$router.push("/Login")
            } else {
              this.$message({
                type: "error",
                message: res.msg
              })
            }
          })
        }  })
    },
  }
}
</script>
<script setup>
import {User,Lock} from '@element-plus/icons-vue';
</script>
<style scoped>
.login{
  opacity: 0.5;
  position: absolute;
  top:20%;
  width: 30%;
  left: 35%;
}
.lizi {
  overflow: hidden;
  width: 100%;
  height: 100%;
  z-index: 9999;
}
</style>
